<template>
  <el-row class="top_container" type="flex" justify="space-between">
    <el-col v-for="(item, index) in dataList" :key="index" :sm="12" :md="7" class="top_box_item" @click.native="goToDetail(item.path)">
      <div class="title">{{ item.title }}</div>
      <div class="num">
        <countTo :duration="3000" :endVal="item.num" />
      </div>
      <div class="subtitle">{{ item.subtitle }}</div>
    </el-col>
  </el-row>
</template>

<script>
import { getAll } from '@/api/largeScreen.js'
import countTo from 'vue-count-to'
export default {
  components: { countTo },
  data() {
    return {
      dataList: [
        { title: '主机数', num: 0, subtitle: '主机：主机数量', path: '/hosts' },
        { title: '进程数', num: 0, subtitle: '进程：进程数量', path: '/hosts/progress' },
        { title: '工单数', num: 0, subtitle: '工单: 工单数', path: '/operation/operationfault' }
      ]
    }
  },
  mounted() {
    this.getAll()
  },
  methods: {
    goToDetail(path) {
      console.log('path', path)
      this.$router.push(path)
    },
    async getAll() {
      const res = await getAll()
      this.dataList[0].num = res.host
      this.dataList[1].num = res.appInfo
      this.dataList[2].num = res.fault
    }

  }
}
</script>

<style lang="scss" scoped>
.progress{
  display: flex;
  justify-content: center;
}
.title{
  font-size: 17px;
  padding-left: 10px;
  padding-top: 5px;
  color: #2A82E4;
  font-weight: bold;
}
.num{
  height: 25px;
  align-self: center;
  font-size: 22px;
  font-weight: 600;
}
.subtitle{
  margin: 15px;
  padding-left: 10px;
  font-size:12px;
  color: #4B5057;

}
.update{
  padding-left: 10px;
  font-size:12px;
  color: #4B5057;
  padding-bottom: 5px;

}
.top_container {
  flex-wrap: wrap;
  // height: 20%;

  .top_box_item {
    height: 92%;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

  }
  .top_box_item {
  user-select: none;
  transition: transform 0.5s ease, box-shadow 0.3s ease;
  border-radius: 10px;
  box-shadow: 0 0 1px #878787;
}

.top_box_item:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 10px #ccc;
}
}
</style>
